<template>
  <div class="chart-container" ref="chartContainer"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  option: Object,
  theme: {
    type: String,
    default: 'light'
  }
});

const chartContainer = ref(null);
let chartInstance = null;

const initChart = () => {
  chartInstance = echarts.init(chartContainer.value, props.theme);
  chartInstance.setOption(props.option);
};

onMounted(() => {
  initChart();
  window.addEventListener('resize', chartInstance.resize);
});

onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
})

watch(() => props.option, (newVal) => {
  chartInstance.setOption(newVal, true);
}, { deep: true });
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
  min-height: 300px;
}
</style>
